<template>
  <el-container class="home-container">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <el-menu  background-color="#333744"
                text-color="#fff"
                active-text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false"
                :router="true" :default-active="activePath">
        <div class="i-layout-sider-logo i-layout-sider-logo-dark">
          <a target="_self" class="i-link i-link-color">
            <img v-show="!isCollapse" :src="maxLogo" key="max-logo"/>
            <img v-show="isCollapse" :src="minLogo" key="min-logo"/>
          </a>
        </div>
        <!-- 菜单 -->
        <el-submenu :index="'/'+item.name" v-for="item in menuList" :key="item.id">
          <template slot="title">
            <i :class="item.icon ? item.icon : 'el-icon-mobile'"></i>
            <span>{{ item.title}}</span>
          </template>
          <!--二级菜单 -->
          <el-menu-item :index="'/'+subItem.name" v-for="subItem in item.child" :key="subItem.id"
                        @click="saveNavState('/'+subItem.name)">
            <template slot="title">
              <i :class="subItem.icon ? subItem.icon : 'el-icon-mobile'"></i>
              <span>{{subItem.title}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          <div class="toggle-button" @click="toggleCollapse">
            <i v-show="!isCollapse" :class="showIoc"></i>
            <i v-show="isCollapse" :class="hideIoc"></i>
          </div>
          <div class="toggle-breadcrumb">
            <breadcrumb></breadcrumb>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-tooltip effect="dark" content="全屏" placement="top" :enterable="false">
              <i style="color: #101117;cursor: pointer;" class="el-icon-full-screen" @click="screenfull"></i>
            </el-tooltip>
          </el-col>
          <el-col :span="19">
            <el-dropdown>
        <span class="el-dropdown-link">
          超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="loginOut" divided>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'index',
  provide(){
    return {
      reload:this.reload
    }
  },
  components: {
    Breadcrumb
  },
  data(){
    return{
      menuList: [],
      isCollapse: false,
      activePath: '',
      maxLogo: 'https://file.iviewui.com/admin-pro-dist/img/logo-dark.ab519d9f.png',
      minLogo: 'https://file.iviewui.com/admin-pro-dist/img/logo-small.4a34a883.png',
      showIoc: 'el-icon-s-fold',
      hideIoc: 'el-icon-s-unfold',
      isFullScreen: false,
      isRouterAlive:true
    }
  },
  created () {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods:{
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push('/login');
    },
    //获取所有菜单
    async getMenuList() {
      const {data: res} = await this.$http.get('dashboard/permission')
      if (res.code !== 200) return this.$message.error(res.data.message)
      this.menuList = res.data.list
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
    screenfull() {
      this.$screenfull.toggle()
      this.isFullScreen = true
    },
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  }
}
</script>

<style scoped>
.i-layout-header-trigger-min {
  width: auto;
  color: #101117;
}

.i-layout-header-trigger {
  display: inline-block;
  width: 30px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.is-active{
  background-color: #3a8ee6 !important;
}

.i-layout-header-trigger-min i {
  color: #101117;
  text-align: center;
  letter-spacing: 0.5em;
  cursor: pointer;
  font-size: 18px;
}

.i-layout-sider-logo-dark {
  border-bottom: 1px solid #101117;
  background: #333744;
}

.i-layout-sider-logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 1px solid #101117;
  overflow: hidden;
}

.i-layout-sider-logo img {
  height: 80%;
  vertical-align: middle;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #ffffff;

}

.el-aside {
  background-color: #333744;
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  background-color: #eaedf1;
}

.el-header > div {
  display: flex;
  align-items: center;
}


.el-aside {
  height: 100%;
}

.toggle-button {
  width: 60px;
  font-size: 18px;
  color: #101117;
  text-align: center;
  letter-spacing: 0.5em;
  cursor: pointer;
}

.toggle-breadcrumb {
  text-align: center;

  cursor: pointer;
}

.el-dropdown-link {

}
</style>
